import React, {useEffect, useState, useRef} from 'react'
import {RouteComponentProps} from "react-router-dom";
import MyNavBar from "../../../components/NavBar/NavBar";
import MyTabBar from "../../../components/TabBar/TabBar";
import ChatListItem from "./ChatListItem/ChatListItem";
import {List,PullToRefresh} from "antd-mobile";
import {connect} from "react-redux";
import {actionGetChatList} from "../../../redux/actions/chatList";
import {IStore} from "../../../redux/store";


interface IProps extends RouteComponentProps {
    chatList: Array<any>;
    actionGetChatList: (uUid: string) => void
}
const ChatList = (props: IProps) => {
    const myList = useRef<HTMLDivElement>(null)
    const [isRefresh,setRefresh] = useState(false)
    useEffect(() => {
        const uUid = sessionStorage.getItem('uUid')
        if(!uUid) props.history.push('/goIn')
        else{
            props.actionGetChatList(uUid)
        }
    },[]) // eslint-disable-line react-hooks/exhaustive-deps
    const refresh = () => {
        setRefresh(true)
        const uUid = sessionStorage.getItem('uUid')
        if(!uUid) props.history.push('/goIn')
        else{
            props.actionGetChatList(uUid)
            setTimeout(() => {
                setRefresh(false)
            },300)
        }
    }
    return (
        <div style={{marginTop: '45px',marginBottom: '50px'}} ref={myList}>
            <MyNavBar content='消息列表'/>
            <PullToRefresh getScrollContainer={()=> myList.current} onRefresh={refresh} direction='down' distanceToRefresh={25} damping={60} refreshing={isRefresh} indicator={ { deactivate: '上拉可以刷新' }}>
            <List className="my-list">
                {
                    props.chatList.length === 0 ?
                        (<div>列表为空</div>)
                        :
                        props.chatList.map(item => {
                            return <ChatListItem key={item.uUid} uNickName={item.uNickName} uUid={item.uUid} avator={item.avator}/>
                        })
                }
            </List>
            </PullToRefresh>
            <MyTabBar />
        </div>
    )
}

export default connect(
    (state: IStore) => ({chatList: state.chatList}),
    {
        actionGetChatList
    }
)(ChatList)